<template>
  <div id="LoginRecord">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>活动中心</el-breadcrumb-item>
      <el-breadcrumb-item>申请管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-form
        :inline="true"
        :model="queryMap"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="活动名称">
          <el-input
            v-model="queryMap.applicationName"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生姓名">
          <el-input
            v-model="queryMap.stuName"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input
            v-model="queryMap.className"
            placeholder="请输入班级"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动类型" label-width="70px">
          <el-select
            v-model="queryMap.applicationType"
            placeholder="请选择活动类型"
            clearable
          >
            <el-option
              v-for="item in topicTypes"
              :key="item.topicTypeId"
              :label="item.topicTypeName"
              :value="item.topicTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select
            v-model="queryMap.status"
            placeholder="请选择审核状态"
            clearable
          >
            <el-option :key="0" label="审核不通过" :value="0"></el-option>
            <el-option :key="1" label="已提交" :value="1"></el-option>
            <el-option :key="2" label="管理员已审核" :value="2"></el-option>
            <el-option :key="3" label="教师已审核" :value="3"></el-option>
            <el-option :key="4" label="审核通过" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            round
            >查询</el-button
          >
          <el-button
            @click="batchCheckApplications"
            icon="el-icon-check"
            :loading="loading"
            :disabled="this.selLogList.length === 0"
            round
            >批量审核</el-button
          >
        </el-form-item>
      </el-form>
      <template>
        <el-table
          :data="logList"
          border
          stripe
          size="mini"
          style="width: 100%; margin-top: 5px"
          @selection-change="selsChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="stuName"
            label="学生姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="applicationTypeName"
            label="活动类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="applicationName"
            label="活动名称"
            align="center"
          ></el-table-column>
          <el-table-column prop="createTime" label="申请时间" align="center">
            <template slot-scope="scope">{{
              scope.row.createTime | dateFormat
            }}</template>
          </el-table-column>
          <el-table-column prop="checkTime" label="审批时间" align="center">
            <template slot-scope="scope" v-if="scope.row.checkTime != null">{{
              scope.row.checkTime | dateFormat
            }}</template>
            <template v-else>Null</template></el-table-column
          >
          <el-table-column
            prop="score"
            label="分数"
            align="center"
          ></el-table-column>
          <el-table-column prop="status" label="审核状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0" style="color: #ff4949"
                >审核不通过</span
              >
              <span v-if="scope.row.status == 1">已提交</span>
              <span v-if="scope.row.status == 2" style="color: #e0f516"
                >管理员已审核</span
              >
              <span v-if="scope.row.status == 3" style="color: #409eff"
                >教师已审核</span
              >
              <span v-if="scope.row.status == 4" style="color: #13ce66"
                >审核通过</span
              >
            </template></el-table-column
          >
          <el-table-column
            prop="comment"
            label="备注"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                confirmButtonText="审核"
                cancelButtonText="撤回"
                icon="el-icon-info"
                iconColor="red"
                title="确定您当前的操作吗？"
                @onConfirm="checkCurrentApplication(scope.row, true)"
                @onCancel="checkCurrentApplication(scope.row, false)"
              >
                <el-button
                  slot="reference"
                  icon="el-icon-thumb"
                  type="text"
                  size="mini"
                  :disabled="
                    (scope.row.type == 4 && scope.row.score <= 5) ||
                    scope.row.type == 0
                  "
                  >审核</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.page"
        :page-sizes="[10, 50, 100]"
        :page-size="this.queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="活动申请" :visible.sync="uploadTopicShow" width="400px">
      <el-form
        :model="currentApplication"
        align="center"
        ref="topicRuleRef"
        :rules="topicRule"
      >
        <el-form-item
          label="活动类型"
          label-width="80px"
          prop="applicationType"
          :rules="[
            {
              required: true,
              message: '活动类型不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-select
            v-model="currentApplication.applicationType"
            placeholder="请选择活动类型"
          >
            <el-option
              v-for="item in topicTypes"
              :key="item.topicTypeId"
              :label="item.topicTypeName"
              :value="item.topicTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="活动名称"
          label-width="80px"
          :rules="[
            {
              required: true,
              message: '活动名称不能为空',
              trigger: 'blur',
            },
          ]"
          prop="applicationName"
        >
          <el-input
            v-model="currentApplication.applicationName"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="上报分数"
          label-width="80px"
          :rules="[
            {
              required: true,
              message: '分数不能为空',
              trigger: 'blur',
            },
          ]"
          prop="score"
        >
          <el-input-number
            v-model="currentApplication.score"
            style="width: 220px"
            :step="0.1"
            :min="0.1"
            :max="10"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="saveApplication"
          >确 定</el-button
        >
        <el-button @click="uploadTopicShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryApplicationByPage,
  queryTopicTypes,
  insertApplication,
  updateApplication,
  removeApplication,
  checkApplication,
  batchCheckApplications,
} from "api/api";
export default {
  data() {
    return {
      queryMap: { page: 1, size: 10, flag: false },
      loading: false,
      total: 0,
      topicTypes: [],
      uploadTopicShow: false,
      currentApplication: {},
      topicRule: {},
      logList: [],
      selLogList: [],
    };
  },

  methods: {
    selsChange(sels) {
      this.selLogList = [];
      sels.forEach((sel) => {
        this.selLogList.push(sel.applicationId);
      });
    },
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getByPage();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getByPage();
    },
    search() {
      queryApplicationByPage(this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.total = res.data.total;
          this.logList = res.data.rows;
          this.loading = false;
        }
      });
    },
    //获取登录日志列表
    getByPage() {
      queryApplicationByPage(this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.total = res.data.total;
          this.logList = res.data.rows;
          this.loading = false;
        }
      });
    },
    getTopicTypes() {
      queryTopicTypes().then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.topicTypes = res.data;
        }
      });
    },
    saveApplication() {
      this.loading = true;
      if (this.currentApplication.applicationId == null) {
        insertApplication(this.currentApplication).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
            this.uploadTopicShow = false;
          } else {
            this.loading = false;
            this.uploadTopicShow = false;
            this.$message({
              type: "success",
              message: "新增成功！",
            });
            this.getByPage();
          }
        });
      } else {
        updateApplication(this.currentApplication).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
            this.loading = false;
            this.uploadTopicShow = false;
          } else {
            this.loading = false;
            this.uploadTopicShow = false;
            this.$message({
              type: "success",
              message: "更新成功！",
            });
            this.getByPage();
          }
        });
      }
      this.currentApplication = {};
    },
    getCurrentApplication(application) {
      this.currentApplication = application;
      this.uploadTopicShow = true;
    },
    delApplication(applicationId) {
      removeApplication(applicationId).then((res) => {
        if (res.flag) {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getByPage();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    checkCurrentApplication(application, flag) {
      if (!flag) {
        application.status = 0;
      }
      checkApplication(application).then((res) => {
        if (res.flag) {
          this.$message({
            type: "success",
            message: "审批成功！",
          });
          this.getByPage();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    batchCheckApplications() {
      batchCheckApplications(this.selLogList).then((res) => {
        if (res.flag) {
          this.$message({
            type: "success",
            message: "审批成功！",
          });
          this.getByPage();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  mounted() {
    this.getTopicTypes();
    this.getByPage();
  },
};
</script>